import React from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import moment from 'moment'
import './index.styl';
function HeaderCard({
  dispatch,
  workBench: { deviceAmount, repariMount, checkAmount, assayAmount, maintainAmount }
}) {
  function handleMore(path, params, today) {
    // 跳转维修页面，缓存数据
    if (path === '/deviceRepair') {
      let data = {
        deviceName: '',//设备名称
        groupName: '',//使用部门
        repairClerk: '',//报修员
        repairman: '',//维修员
        repairmanTel: '',//维修员电话
        state: params.code, //状态
        repairStartTime: '',//开始时间
        repairEndTime: '',//结束时间
        current: '',// 当前页码
        size: '10',
      }
      localStorage.setItem('repairSingle', JSON.stringify(data))
    } else {
      const newPath = path.slice(1)
      dispatch({
        type: `${newPath}/updateSerachParams`,
        payload: {
          serachParams: {
            ...params,
            current: 1
          }
        }
      })
    }
    router.push({
      pathname: path,
      params: today ? { ...params, today } : { ...params }
    });
  }

  return (
    <div className="headerCard">
      <div className="headerCard1">
        <div className="cardBox">
          <div className="line line1" style={{filter: 'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#4eabfc, endColorstr=#25b8fc)'}}></div>
          <div className="content content1 hasMargin">
            <div className="totalBox">
              <div className="totalText">
                <span className="totalNum">{deviceAmount && deviceAmount.totalCount}</span>
                <span className="totalTitle">设备总数</span>
              </div>
              <div className="imgBox">
                <img alt="" src={require('assets/workBench/shebei.png')} />
              </div>
            </div>
            <div className="moreBox">
              <div className="moreConent">
                <div className="moreNum">{deviceAmount && deviceAmount.activeCount}</div><br />
                <div className="moreFoot">
                  <span className="start">启用</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceLedger', { ledgerStatus: 3, runStatus: '' })}
                  >
                    更多>
                  </span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{deviceAmount && deviceAmount.pauseCount}</div><br />
                <div className="moreFoot">
                  <span className="start">停用</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceLedger', { ledgerStatus: 4, runStatus: '' })}
                  >
                    更多>
                  </span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{deviceAmount && deviceAmount.faultCount}</div><br />
                <div className="moreFoot">
                  <span className="start">故障</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceLedger', { ledgerStatus: '', runStatus: 2 })}
                  >
                    更多>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="cardBox cardBox1_width">
          <div className="line line2" style={{filter: 'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#a66dfb, endColorstr=#6f4bfa)'}}></div>
          <div className="content content1">
            <div className="totalBox">
              <div className="totalText">
                <span className="totalNum">{repariMount && repariMount.repairOrderNum}</span>
                <span className="totalTitle">维修任务</span>
              </div>
              <div className="imgBox">
                <img alt="" src={require('assets/workBench/weixiu.png')} />
              </div>
            </div>
            <div className="moreBox">
              <div className="moreConent">
                <div className="moreNum">{repariMount && repariMount.waitReceiptNum}</div><br />
                <div className="moreFoot">
                  <span className="start">待接单</span>
                  <span
                    className="moreBtn"
                    onClick={
                      () => handleMore('/deviceRepair', { code: '4', codeText: '待接单' })
                    }>
                    更多>
                    </span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{repariMount && repariMount.waitRapireNum}</div><br />
                <div className="moreFoot">
                  <span className="start">待维修</span>
                  <span
                    className="moreBtn"
                    onClick={
                      () => handleMore('/deviceRepair', { code: '7', codeText: '待维修' })
                    }
                  >更多></span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{repariMount && repariMount.rapireingNum}</div><br />
                <div className="moreFoot">
                  <span className="start">维修中</span>
                  <span
                    className="moreBtn"
                    onClick={
                      () => handleMore('/deviceRepair', { code: '8', codeText: '维修中' })
                    }
                  >更多></span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{repariMount && repariMount.waitCheckNum}</div><br />
                <div className="moreFoot">
                  <span className="start">待验收</span>
                  <span
                    className="moreBtn"
                    onClick={
                      () => handleMore('/deviceRepair', { code: '9', codeText: '待验收' })
                    }
                  >更多></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="headerCard1">
        <div className="cardBox">
          <div className="line line3" style={{filter: 'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#41fba3, endColorstr=#36d8bf)'}}></div>
          <div className="content content2 hasMargin">
            <div className="totalBox">
              <div className="totalText">
                <span className="totalNum">{assayAmount && assayAmount.totalCount}</span>
                <span className="totalTitle">检定计划</span>
              </div>
              <div className="imgBox">
                <img alt="" src={require('assets/workBench/souse.png')} />
              </div>
            </div>
            <div className="moreBox">
              <div className="moreConent">
                <div className="moreNum">{assayAmount && assayAmount.planCount}</div><br />
                <div className="moreFoot">
                  <span className="start">计划中</span>
                  <span className="moreBtn" onClick={() => handleMore('/deviceCali', { status: 3 })}>
                    更多>
                  </span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{assayAmount && assayAmount.dailyCount}</div><br />
                <div className="moreFoot">
                  <span className="start">今日待办</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceCali', { status: 3, startTime: moment(Date.now()).format('YYYY-MM-DD'),endTime: moment(Date.now()).format('YYYY-MM-DD') }, 'today')}
                  >
                    更多>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="cardBox">
          <div className="line line4" style={{filter: 'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fcd26a, endColorstr=#fafa92)'}}></div>
          <div className="content content2 hasMargin">
            <div className="totalBox">
              <div className="totalText">
                <span className="totalNum">{checkAmount && checkAmount.totalCount}</span>
                <span className="totalTitle">点检计划</span>
              </div>
              <div className="imgBox">
                <img alt="" src={require('assets/workBench/shebeidianjianjihua.png')} />
              </div>
            </div>
            <div className="moreBox">
              <div className="moreConent">
                <div className="moreNum">{checkAmount && checkAmount.planCount}</div><br />
                <div className="moreFoot">
                  <span className="start">计划中</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceCheck', { status: 3 })}
                  >
                    更多></span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{checkAmount && checkAmount.dailyCount}</div><br />
                <div className="moreFoot">
                  <span className="start">今日待办</span>
                  <span className="moreBtn" onClick={() => handleMore('/deviceCheck', { status: 3, startTime: moment(Date.now()).format('YYYY-MM-DD'),endTime: moment(Date.now()).format('YYYY-MM-DD') }, 'today')}>更多></span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="cardBox">
          <div className="line line5" style={{filter: 'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fc4a2c, endColorstr=#fa8e45)'}}></div>
          <div className="content content2">
            <div className="totalBox">
              <div className="totalText">
                <span className="totalNum">{maintainAmount && maintainAmount.totalCount}</span>
                <span className="totalTitle">保养计划</span>
              </div>
              <div className="imgBox">
                <img alt="" src={require('assets/workBench/baoyangjihua.png')} />
              </div>
            </div>
            <div className="moreBox">
              <div className="moreConent">
                <div className="moreNum">{maintainAmount && maintainAmount.planCount}</div><br />
                <div className="moreFoot">
                  <span className="start">计划中</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceUpkeep', { status: 3 })}
                  >
                    更多>
                  </span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{maintainAmount && maintainAmount.dailyCount}</div><br />
                <div className="moreFoot">
                  <span className="start">今日待办</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceUpkeep', { status: 3, startTime: moment(Date.now()).format('YYYY-MM-DD'), endTime: moment(Date.now()).format('YYYY-MM-DD') }, 'today')}
                  >
                    更多>
                  </span>
                </div>
              </div>
              <div className="centerLine"></div>
              <div className="moreConent">
                <div className="moreNum">{maintainAmount && maintainAmount.toBeConfirmedCount}</div><br />
                <div className="moreFoot">
                  <span className="start">待确认</span>
                  <span
                    className="moreBtn"
                    onClick={() => handleMore('/deviceUpkeep', { status: 3, pending: 1 })}
                  >
                    更多>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default connect(({ workBench, deviceLedger, deviceUpkeep }) => ({
  workBench, deviceLedger, deviceUpkeep
}))(HeaderCard);
